<template>
	<view class="map-min-box">
		<!-- 可视化地图 -->
		<view class="map-min-1" v-if="maptype == 1">
			<view class="map-box" v-if="longitude">
				<map
					id="myMap"
					:enable-poi="true"
					:enable-scroll="true"
					:show-location="true"
					style="height: 100%; width: 100%"
					:longitude="longitude"
					:latitude="latitude"
					scale="15"
					@regionchange="regionchangetab"
				>
					<cover-image :class="jump == 1 ? 'controls-play-img bounce-animation' : 'controls-play-img'" :src="orientationIco"></cover-image>
					<cover-image v-if="showResetting" @click="setposition" class="position-play-img" :src="resettingIco"></cover-image>
				</map>
			</view>
			<view class="sou-item-list">
				<view class="u-search-box" @click="opensea">
					<view class="search-min-box">
						<image src="https://lbs.gtimg.com/visual/miniprogram-plugin/location-picker/assets/s_search@2x.png" mode=""></image>
						搜索地点
					</view>
				</view>
				<view class="list-item-name-box">
					<view class="category-scroll-view">
						<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
							<view class="scroll-view-item" v-for="(item, index) in list" :key="index" @click="setpoi(item, index)">
								<view class="poi-item-name">
									<image :src="listIco" mode=""></image>
									{{ item.name }}
								</view>
								<view class="poi-address">{{ item.address }}</view>
								<view class="right-icon" v-if="locinx == index"></view>
							</view>
							<view class="loading-box" v-if="list.length == 0">
								<view class="load-animation" v-if="loading">
									<view class="spinner"></view>
									<view class="txt-item">加载中</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="but-box">
					<view class="btn-location" @click="fixAddress">确认选点</view>
				</view>
			</view>
		</view>
		<view class="map-min-2" v-if="maptype == 2">
			<view class="map-min-2-search-box">
				<input v-model="keyword" placeholder="搜索地点" @input="changeword" @confirm="changeword" class="locationpicker-search-content-ipt" />
				<view class="locationpicker-search-clear" @click="onClearInput">
					<image src="https://lbs.gtimg.com/visual/miniprogram-plugin/location-picker/assets/btn_close@2x.png" class="locationpicker-search-clear-ipt" mode=""></image>
				</view>
				<view class="search-buttons-container">
					<view class="locationpicker-search-content-btn" @click="changeword">搜索</view>
					<view class="locationpicker-search--content-btn-line"></view>
					<view class="locationpicker-search-content-btn" @click="cancelSearch">取消</view>
				</view>
				<!-- <u-search placeholder="搜索地点" shape="square" bgColor="#ebebeb" v-model="keyword" @search='' @custom='changeword' @change="changeword"></u-search> -->
			</view>
			<u-line></u-line>
			<scroll-view scroll-y="true" class="scroll-Y">
				<block>
					<view class="scroll-view-item" v-for="(item, index) in seolist" :key="index" @click="seopoi(item, index)">
						<view class="poi-item-name">
							<image :src="listIco" mode=""></image>
							{{ item.name }}
						</view>
						<view class="poi-address">{{ item.address }}</view>
					</view>
				</block>
				<view class="loading-box" v-if="seolist.length == 0 && keyword != ''">
					<view class="load-animation" v-if="loading">
						<view class="spinner"></view>
						<view class="txt-item">加载中</view>
					</view>
					<view class="empty-box" v-if="!loading && seolist.length == 0">
						<view class="value-txt-box-2">没有搜索到数据</view>
					</view>
				</view>
				<!-- 历史搜索记录 -->
				<view class="history-item-box" v-if="history.length == 0 && keyword == ''">
					<view class="empty-box">
						<view class="value-txt-box-1">还没有历史记录</view>
						<view class="value-txt-box-2">快来体验世界吧</view>
					</view>
				</view>
				<view class="history-item-box" v-if="history.length > 0 && keyword == ''">
					<view class="scroll-view-item" v-for="(item, index) in history" :key="index" @click="seopoi(item, index)">
						<view class="poi-item-name">
							<image src="/static/Invite/item-inx.png" mode=""></image>
							{{ item.name }}
						</view>
						<view class="poi-address">{{ item.address }}</view>
					</view>
					<view class="item-but-box" v-if="history.length > 0">
						<view class="locationpicker-clear-history-btn" @click="Clearhistory">清空历史记录</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
var amapFile = require('./amap-wx.js');
// #ifdef WEB
var wx = require('./jweixin.js');
// #endif
export default {
	name: 'maps',
	props: {
		// 高德Web服务Key
		mapKey: {
			type: String,
			default: ''
		},
		// 定位复位图标
		resettingIco: {
			type: String,
			default: '/static/position.png'
		},
		// 定位图标
		orientationIco: {
			type: String,
			default: '/static/map-inx.png'
		},
		// 列表图标
		listIco: {
			type: String,
			default: '/static/item-inx.png'
		},
		// 搜索范围
		Radius: {
			type: String,
			default: ''
		},
		//定位功能显示
		showResetting: {
			type: Boolean,
			default: true
		},
		// 微信公众号jsSdk配置
		configData: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			maptype: 1,
			latitude: '',
			longitude: '',
			markers: [],
			list: [],
			history: [],
			seolist: [],
			myAmapFun: '',
			location: '',
			jump: 1,
			keyword: '',
			mapObj: '',
			loading: true,
			page: 1,
			count: 0,
			locinx: 0,
			changel: 1
		};
	},
	created: function () {
		var that = this;
		// if (options.locinx) {
		// 	that.locinx = options.locinx;
		// }
		that.mapObj = uni.createMapContext('myMap', this);
		that.myAmapFun = new amapFile.AMapWX({
			key: this.mapKey
		});
		// #ifndef WEB
		uni.getLocation({
			type: 'gcj02',
			altitude: true,
			geocode: true,
			isHighAccuracy: true,
			success: function (res) {
				try {
					that.latitude = res.latitude;
					that.longitude = res.longitude;
					that.location = `${that.latitude},${that.longitude}`;
					that.attachments();
				} catch {}
			},
			fail: function (info) {
				//失败回调
				console.log(info, 2);
			}
		});
		// #endif
		// #ifdef WEB
		var ua = window.navigator.userAgent.toLowerCase();
		if (ua.match(/micromessenger/i) == 'micromessenger') {
			// // 配置sdksj
			if (that.isEmpty(that.configData)) {
				console.log('请配置wxJSsdk配置参数！');
				return;
			} else {
				wx.config({
					...that.configData,
					jsApiList: ['openLocation', 'getLocation'] // 必填，需要使用的JS接口列表
				});
				// sdk加载完成后执行
				wx.ready(() => {
					wx.checkJsApi({
						jsApiList: ['getLocation'],
						success: (res) => {
							console.log('jweixin.ready', res);
							if (res.checkResult.getLocation == false) {
								console.log('微信版本低');
								return;
							}
						}
					});
					wx.error((err) => {
						console.error('接口调取失败', err);
					});
					// 获取位置
					wx.getLocation({
						type: 'gcj02',
						success: (res) => {
							console.log('jssdk获取的位置:', res.longitude, res.latitude);
							that.latitude = res.latitude;
							that.longitude = res.longitude;
							that.location = `${that.latitude},${that.longitude}`;
							that.attachments();
						},
						cancel: (res) => {
							console.error('您已禁止获取位置信息');
						}
					});
				});
			}
		} else {
			console.log('不是微信客户端');

			uni.getLocation({
				type: 'gcj02',
				altitude: true,
				geocode: true,
				isHighAccuracy: true,
				success: function (res) {
					try {
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						that.location = `${that.latitude},${that.longitude}`;
						that.attachments();
					} catch {}
				},
				fail: function (info) {
					//失败回调
					console.log(info, 2);
				}
			});
		}
		// #endif
	},
	methods: {
		isEmpty(obj) {
			return Object.keys(obj).length === 0;
		},
		Clearhistory() {
			let _this = this;
			uni.showModal({
				title: '提示',
				content: '确定清空全部历史记录？',
				success: function (res) {
					if (res.confirm) {
						uni.removeStorage({
							key: 'locationHistory',
							success: function (res) {
								console.log('success');
								_this.history = [];
							}
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		// 返回
		getbacktrack() {
			if (this.maptype == 2) {
				var that = this;
				this.page = 1;
				that.attachments();
				this.maptype = 1;
				this.keyword = '';
			} else {
				uni.navigateBack({});
			}
		},
		// 确定地址
		fixAddress() {
			let location = this.list[this.locinx];
			console.log(123);
			this.$emit('commitCheck', location);
		},
		// 搜索选择
		seopoi(e) {
			var that = this;
			this.changel = 2;
			let lon = e.location.split(',');
			this.latitude = lon[1];
			this.longitude = lon[0];
			this.page = 1;
			this.list.push(e);
			const val = this.history.find((k) => k.id == e.id);
			if (!val) {
				this.history.unshift(e);
				uni.setStorage({
					key: 'locationHistory',
					data: this.history,
					success: function () {
						console.log('success');
					}
				});
			}
			that.location = e.location;
			that.attachments();
			setTimeout(() => {
				that.changel = 1;
			}, 1000);
			this.maptype = 1;
			this.keyword = '';
		},
		// 搜索
		changeword() {
			var that = this;
			that.loading = true;
			that.seolist = [];
			let formData = {};
			if (that.Radius) {
				formData = {
					location: that.location,
					keywords: that.keyword,
					city: that.Radius,
					citylimit: true
				};
			} else {
				formData = {
					location: that.location,
					keywords: that.keyword
				};
			}
			that.myAmapFun.getInputtips({
				...formData,
				success: function (data) {
					console.log(data, '--1--');
					data.tips.forEach((item, index) => {
						//成功回调
						if (item.location != '' && item.district != '') {
							let province = '';
							if (item.district.match(/^(.*?省|.*?自治区)/)) {
								province = item.district.match(/^(.*?省|.*?自治区)/)[0];
							}
							let city = '';
							if (item.district.replace(province, '').match(/^(.*?市|.*?地区)/)) {
								city = item.district.replace(province, '').match(/^(.*?市|.*?地区)/)[0];
							}
							let district = '';
							if ((district = item.district.replace(province + city, '').match(/^.*?(区|县|镇)/))) {
								district = item.district.replace(province + city, '').match(/^.*?(区|县|镇)/)[0];
							}
							that.seolist.push({
								id: item.id,
								name: item.name,
								address: item.address,
								location: item.location,
								province: province,
								city: city,
								district: district,
								adcode: item.adcode
							});
						}
					});
					that.count = data.count;
					that.loading = false;
					uni.hideLoading();
				},
				fail: function (info) {
					//失败回调
					console.log(info, 2);
				}
			});
		},
		// 选择定位坐标地址
		setpoi(e, inx) {
			var that = this;
			this.locinx = inx;
			this.changel = 2;
			let lon = e.location.split(',');
			this.latitude = lon[1];
			this.longitude = lon[0];
		},
		// 下拉加载
		lower() {
			if (this.list.length != this.count) {
				this.page++;
				uni.showLoading({
					title: '加载中...'
				});
				this.attachments();
			}
		},
		// 复原定位
		setposition() {
			var that = this;
			this.changel = 2;
			this.locinx = 0;
			this.page = 1;
			uni.getLocation({
				type: 'gcj02',
				altitude: true,
				geocode: true,
				isHighAccuracy: true,
				success: function (res) {
					console.log(res, 5656);
					try {
						that.location = `${res.latitude},${res.longitude}`;
						setTimeout(() => {
							console.log(that.mapObj, 'mod--1');
							that.mapObj.moveToLocation({
								latitude: res.latitude,
								longitude: res.longitude,
								scale: 15, // 可选，缩放比例
								animation: true, // 开启平滑移动动画
								complete(res) {
									console.log(res, '6633');
								}
							});
						}, 400);
						that.list = [];
						that.loading = true;
						that.attachments();
						setTimeout(() => {
							that.changel = 1;
						}, 1000);
					} catch {}
				},
				fail: function (info) {
					//失败回调
					console.log(info, 2);
				}
			});
		},
		// 搜索跳转
		opensea() {
			this.list = [];
			this.seolist = [];
			this.maptype = 2;
			let _this = this;
			uni.getStorage({
				key: 'locationHistory',
				success: function (res) {
					_this.history = res.data;
					console.log(_this.history, 5656);
				}
			});
		},
		// 发生变化定位
		regionchangetab(e) {
			// #ifdef APP
			setTimeout(() => {
				let mapForm = _this.mapObj.$getAppMap();
				mapForm.onstatuschanged = function (eve) {
					_this.location = `${eve.center.latitude},${eve.center.longitude}`;
					if (_this.changel == 1) {
						_this.loading = true;
						_this.page = 1;
						_this.list = [];
						_this.attachments();
					} else {
						_this.changel = 1;
					}
				};
			}, 400);
			// #endif
			// #ifdef H5 || MP
			if (this.changel == 1) {
				if (e.type == 'end') {
					_this.loading = true;
					this.page = 1;
					this.jump = 0;
					this.location = `${e.detail.centerLocation.latitude},${e.detail.centerLocation.longitude}`;
					this.list = [];
					this.attachments();
					setTimeout(() => {
						this.jump = 1;
					}, 400);
				}
			}
			// #endif
		},
		// 获取附近poi
		attachments() {
			var that = this;
			that.myAmapFun.getPoiAround({
				location: that.location,
				page: that.page,
				success: function (data) {
					console.log(data, '--1--', that.location);
					if (data) {
						data.poisData.forEach((item, index) => {
							//成功回调
							that.list.push({
								id: item.id,
								name: item.name,
								address: item.address,
								location: item.location,
								province: item.pname,
								city: item.cityname,
								district: item.adname
							});
						});
						if (!that.list[0].pcode) {
							that.list[0].pcode = that.list[1].pcode;
							that.list[0].citycode = that.list[1].citycode;
						}
						that.count = data.count;
					}

					that.loading = false;
					uni.hideLoading();
				},
				fail: function (info) {
					//失败回调
					console.log(info, 2);
				}
			});
		},
		onClearInput() {
			this.keyword = '';
			this.seolist = [];
		},
		// 取消搜索
		cancelSearch() {
			// this.keyword = '';
			// this.seolist = [];
			this.maptype = 1; // 将maptype值修改为1，返回地图视图
			// 重新加载当前页面
			this.$router.back(-1)
		}
		// // 点击定位
		// makertap(e) {
		// 	this.jump = 0;
		// 	this.location = `${e.detail.latitude},${e.detail.longitude}`;
		// 	this.mapObj.moveToLocation({
		// 		latitude: e.detail.latitude,
		// 		longitude: e.detail.longitude,
		// 		scale: 15, // 可选，缩放比例
		// 		animation: true // 开启平滑移动动画
		// 	});
		// 	this.changel=1
		// 	// setTimeout(() => {
		// 	// this.latitude = e.detail.latitude;
		// 	// this.longitude = e.detail.longitude;
		// 	// }, 1200);
		// }
	}
};
</script>

<style lang="scss">
.map-min-box {
	height: 100vh;
	width: 100vw;
	overflow: hidden;

	.load-animation {
		height: 100rpx;
		margin: auto;
	}

	.txt-item {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 30rpx;
		color: rgba(0, 0, 0, 0.3);
		text-align: center;
	}

	.spinner {
		width: 50rpx;
		margin: auto;
		height: 50rpx;
		border: 6rpx solid rgba(0, 0, 0, 0.3);
		border-top-color: #ffffff;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	.top-box {
		background-color: #fff;

		.block_1 {
			position: relative;

			.Title-top {
				text-align: center;
				font-size: 34rpx;
				font-weight: 500;
				color: #000000;
			}

			.ioc-box {
				position: absolute;
				z-index: 999;
				left: 18rpx;
				top: 0rpx;
				height: 100%;
				display: flex;

				::v-deep .u-icon {
					.u-icon__icon {
						font-size: 45rpx !important;
						font-weight: bold !important;
					}
				}
			}
		}
	}

	// 可视化地图选点
	.map-min-1 {
		width: 100%;
		height: 100%;

		.map-box {
			width: 100%;
			height: 50%;

			#myMap {
				width: 100%;
				height: 100%;
				position: relative;
			}

			@keyframes bounce {
				0% {
					top: 50%;
					animation-timing-function: ease-in;
				}

				/* 动画开始时图片位于原始位置 */
				50% {
					top: 40%;
				}

				/* 动画进行到一半时，图片向上移动10像素 */
				100% {
					top: 50%;
					animation-timing-function: ease-out;
				}

				/* 动画结束时回到原始位置 */
			}

			.bounce-animation {
				animation: bounce 0.6s alternate;
				/* 动画名称、持续时间、重复次数和交替方向 */
			}

			.controls-play-img {
				height: 88rpx;
				left: 50%;
				margin-left: -40rpx;
				margin-top: -88rpx;
				top: 50%;
				width: 80rpx;
				z-index: 9999;
				position: absolute;
			}

			.position-play-img {
				bottom: 32rpx;
				height: 66rpx;
				right: 16rpx;
				width: 66rpx;
				border-radius: 50%;
				background-color: #fff;
				overflow: hidden;
				z-index: 9999;
				position: absolute;
			}
		}

		.sou-item-list {
			width: 100%;
			height: 50%;

			.u-search-box {
				padding: 28rpx 32rpx 20rpx;

				.search-min-box {
					background: #f2f2f2;
					border-radius: 14rpx;
					box-sizing: border-box;
					color: #999;
					font-size: 28rpx;
					height: 68rpx;
					line-height: 40rpx;
					padding: 14rpx 22rpx;

					image {
						display: inline-block;
						height: 32rpx;
						vertical-align: middle;
						width: 32rpx;
					}
				}
			}

			.list-item-name-box {
				height: calc(100% - 108rpx - 160rpx);
				width: calc(100% - 60rpx);
				padding: 0 20rpx 0 40rpx;
				margin-bottom: 110rpx; /* 为底部确认按钮留出空间 */

				.category-scroll-view {
					width: 100%;
					height: 100%;

					.scroll-Y {
						width: 100%;
						height: 100%;

						.scroll-view-item {
							border-bottom: 2rpx solid #e5e5e5;
							margin-right: 20rpx;
							padding: 32rpx 0 30rpx;
							position: relative;

							.poi-item-name {
								color: #333;
								font-size: 28rpx;
								line-height: 40rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								width: 90%;

								image {
									display: inline-block;
									height: 32rpx;
									margin-right: 8rpx;
									margin-top: -6rpx;
									vertical-align: middle;
									width: 32rpx;
								}
							}

							.poi-address {
								color: #666;
								font-size: 24rpx;
								line-height: 32rpx;
								margin-left: 40rpx;
								margin-top: 8rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								width: 80%;
							}

							.right-icon {
								border-bottom: 4rpx solid #427cff;
								border-left: 4rpx solid #427cff;
								height: 8rpx;
								margin-top: -2rpx;
								position: absolute;
								right: 0;
								top: 50%;
								-webkit-transform: rotate(-45deg);
								transform: rotate(-45deg);
								width: 20rpx;
							}
						}

						.loading-box {
							height: 100%;
							width: 100%;
							display: flex;

							::v-deep .u-loading-icon {
								margin: auto;
							}
						}
					}
				}
			}

			.but-box {
				padding: 20rpx 40rpx 22rpx;
				border-top: 2rpx solid #e5e5e5;
				padding-bottom: calc(22rpx );
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: #fff;
				z-index: 100;

				.btn-location {
					background: #427cff;
					border-radius: 200rpx;
					color: #fff;
					font-size: 30rpx;
					height: 68rpx;
					line-height: 68rpx;
					text-align: center;
				}
			}
		}
	}

	// 可视化地图选点结束
	.map-min-2 {
		width: 100vw;
		height: 100vh;
		background-color: #fff;

		.loading-box {
			height: 100%;
			width: 100%;
			display: flex;

			.empty-box {
				padding: 200rpx 0;
				text-align: center;
				width: 100%;

				.value-txt-box-1 {
					margin: 10rpx auto;
				}

				.value-txt-box-2 {
					color: #666;
					font-size: 26rpx;
					margin: 0 auto;
				}
			}
		}

		.map-min-2-search-box {
			height: 84rpx;
			background: #efefef;
			border-radius: 7px;
			height: 42px;
			margin: 0 14px 10px;
			display: -webkit-flex;
			display: flex;
			-webkit-justify-content: space-between;
			justify-content: space-between;
			align-items: center;

			input {
				cursor: auto;
				display: block;
				font-family: UICTFontTextStyleBody;
				height: 1.4rem;
				min-height: 1.4rem;
				overflow: hidden;
				text-overflow: clip;
				white-space: nowrap;
			}

			.locationpicker-search-content-ipt {
				height: 42px;
				padding-left: 10px;
				flex: 1;
			}

			.locationpicker-search-clear {
				height: 43px;
				text-align: center;
				width: 33px;
				display: flex;
				align-items: center;
				justify-content: center;

				.locationpicker-search-clear-ipt {
					height: 16px;
					width: 16px;
				}

				image {
					display: block;
				}
			}
			
			.search-buttons-container {
				display: flex;
				align-items: center;
			}

			.locationpicker-search--content-btn-line {
				background: #c7c7c7;
				height: 16px;
				margin: 0 5px;
				width: 1px;
			}

			.locationpicker-search-content-btn {
				color: #427cff;
				height: 42px;
				line-height: 42px;
				padding: 0 10px;
				text-align: center;
				white-space: nowrap;
			}
		}

		.scroll-Y {
			height: calc(100vh - 87px - 150rpx);
			width: 100vw;

			.scroll-view-item {
				border-bottom: 2rpx solid #e5e5e5;
				padding: 30rpx 40rpx 30rpx 40rpx;
				position: relative;

				.poi-item-name {
					color: #333;
					font-size: 32rpx;
					line-height: 44rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 90%;

					image {
						display: inline-block;
						height: 36rpx;
						margin-right: 8rpx;
						margin-top: -8rpx;
						vertical-align: middle;
						width: 36rpx;
					}
				}

				.poi-address {
					color: #666;
					font-size: 26rpx;
					line-height: 36rpx;
					margin-left: 44rpx;
					margin-top: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 80%;
				}
			}

			// 历史
			.history-item-box {
				width: 100vw;
				height: 100%;

				.empty-box {
					padding: 200rpx 0;
					text-align: center;
					width: 100%;

					.value-txt-box-1 {
						margin: 10rpx auto;
					}

					.value-txt-box-2 {
						color: #666;
						font-size: 26rpx;
						margin: 0 auto;
					}
				}

				.item-but-box {
					height: 160rpx;
					padding-top: 20rpx;

					.locationpicker-clear-history-btn {
						border: 2rpx solid #c7c7c7;
						border-radius: 32rpx;
						color: #666;
						font-size: 26rpx;
						height: 60rpx;
						line-height: 60rpx;
						margin: 0 auto;
						text-align: center;
						width: 268rpx;
					}
				}

				.scroll-view-item {
					border-bottom: 2rpx solid #e5e5e5;
					padding: 30rpx 40rpx 30rpx 40rpx;
					position: relative;

					.poi-item-name {
						color: #333;
						font-size: 28rpx;
						line-height: 40rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 90%;

						image {
							display: inline-block;
							height: 32rpx;
							margin-right: 8rpx;
							margin-top: -6rpx;
							vertical-align: middle;
							width: 32rpx;
						}
					}

					.poi-address {
						color: #666;
						font-size: 24rpx;
						line-height: 32rpx;
						margin-left: 40rpx;
						margin-top: 8rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 80%;
					}
				}
			}
		}
	}
}
</style>
